<template>
  <div class="client-list">
    <e-container class="container">
      <a-spin :spinning="loading" tip="Loading...">
        <a-table
          :columns="columns"
          :data-source="data"
          class="ant-table-striped"
          :pagination="false"
          :row-class-name="(_record, index) => (index % 2 === 0 ? 'table-striped' : null)"
        >
          <template #emptyText>
            <e-empty>
              <template #description>
                <div>No Data</div>
              </template>
            </e-empty>
          </template>
        </a-table>
      </a-spin>
    </e-container>

    <Teleport v-if="isMounted" to="#title-left-teleport-from-child">
      <div class="back-area">
        <span class="back" @click="router.push({ path: '/am-pm' })">
          <e-icon type="Aright" color="#3c6cfe"></e-icon>
        </span>
        <div class="info">Client List</div>
      </div>
    </Teleport>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { clientColumn } from '../column.js'
import ampm from '@/api/ampm'
import EContainer from '@/components/EContainer.vue'
import EEmpty from '@/components/EEmpty.vue'

const route = useRoute()
const router = useRouter()
const isMounted = ref(false)
const loading = ref(false)
const data = ref([])
const columns = reactive(clientColumn)

const getList = () => {
  loading.value = true
  const { type, from, empID } = route.query
  ampm
    .getClientsList({
      type,
      from,
      empID
    })
    .then(res => {
      if (res.code === 2000) {
        data.value = res.data
      }
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 30)
    })
}

onMounted(() => {
  isMounted.value = true
  getList()
})
</script>

<style scoped lang="less">
@import '@/assets/style/reset_table';
.back-area {
  display: flex;
  align-items: center;
  width: 500px;
  padding-top: 4px;
  .back {
    display: inline-block;
    border: 1px solid @border-color;
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 22px;
    cursor: pointer;
    margin-right: 26px;
  }
  .info {
    font-size: 18px;
    font-weight: 700;
    color: @black-85p;
  }
}
</style>
<route lang="yaml">
name: Client List
path: /am-pm/client-list
</route>
